<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>htmlcss 阶段</title>
    <style>
        body {
            margin: 0;
        }

        .layout {
            width: 1200px;
            height: 300px;
            background-color: #ccc;
            margin: 0 auto;
        }

        .layout>div {
            float: left;
            width: 600px;
            height: 300px;
            box-sizing: border-box;
            padding: 20px;
        }

        .left {
            border-right: 2px dashed #333;
        }

        .right {
            border-left: 2px dashed #333;
        }

        .layout>div span {
            display: inline-block;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid #f0f0f0;
            border-radius: 50%;
            color: #f0f0f0;
        }

        .left span {
            background-color: deepskyblue;
        }

        .left span.active {
            background-color: red;
        }

        .right span {
            background-color: red;
        }
    </style>
</head>

<body>
    
       <!-- <div class="layout">
                <div class="left">
                    <span>0</span>
                </div>
                <div class="right">
                    <span>0</span>
                </div>
        </div>  -->
   

    <script>
        // 要求：
            // 现有一份数据 data , 记录数字 1 ~ 33 ; 
            // 可以复制一份新数据 newData
            // 通过输入弹窗（prompt）输入数字，记录输入的索引值和数量,在新数据里面取出指定的数据数组
            // 把从新数据从获取的数据数组渲染在页面.right标签区域
            // 把原数组数据渲染在.left 标签区域 ，同时被输入选中的数字，背景色为红色。
            // 如图所示

        // 数据
        var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33];
        // 新数据
        var newData = [];
        // 浅拷贝的逻辑
        for(var index in data){
            // 复制data
            newData[index] = data[index];
        }
        // console.log(newData);
        // 定义变量 记录弹窗输入的值
        var v1 = prompt("请输入数组的下标");
        var v2 = prompt("请输入数量");

        // 转number数据类型
        v1 = v1 - 0;
        v2 = v2 - 0;

        // 记录开始数字字符的索引值
        var startIndex = v1;
        // 记录结束数字字符的索引值
        var endIndex = startIndex + v2;


        // 根据索引值和长度获取数据（数组）
        // v1： 索引值
        // v2:  数量（长度）
        var arr = newData.splice(v1,v2);// data 和 newData 是互不影响的数据
        // console.log(arr);

        // 定义函数 ，渲染数据（data左边数据, arr右边数据）
        function template() {
            // 字符串的拼接
            var str = '';
                str +='<div class="layout">'
                str +='        <div class="left">'
                // 动态填充数值
                for(var i = 0 ; i < data.length ; i ++){
                    // 把选中的数值标签设置类名（背景红色）
                    if(i >= startIndex && i < endIndex){
                        str +='            <span class="active">'+data[i]+'</span>'
                    }else {
                        str +='            <span>'+data[i]+'</span>'
                    }
                   
                }
                str +='        </div>'
                str +='        <div class="right">'

                for(var j = 0 ; j < arr.length ; j ++){
                    str +='            <span>'+arr[j]+'</span>'
                }

                str +='        </div>'
                str +='</div>'

            // 渲染字符串(在实际开发过程，不用write这个方法)
            document.write(str);
        }

        // 调用函数
        template(data, arr);


        // var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33];

        // var newData1 = [];
        // console.log(Array.isArray(newData1));
        // for(var index in data ) {
        //     newData1[index] = data[index];
        // }
        // var v3 = prompt("请输入第一个值");
        // var v4 = prompt("请输入第二个值，此值为记录数量");
        // console.log(typeof v3);
        // v3 = v3 - 0;
        // v4 = v4 - 0;
        // console.log(typeof v3);
        // var arr1 = newData1.splice(v3,v4);
        // console.log(arr1);
        // for (i = 0 ; i < data.length ; i ++) {
        //     if(i >= v3 && i < v3 + v4 ) {

        //     }
        // }





    </script>
</body>

</html>